<template>
    <div :ref="reff" :style="styless"></div>
</template>

<script>
import * as echarts from 'echarts'
import Bus from '../../Bus'
export default {
  props: {
    reff: {
      type: String,
      default: 'first'
    },
    styless: {
      type: String,
      default: 'width: 600px;height:400px;'
    },
    datasss: Array
  },
  watch: {
    'reff': {
      immediate: true,
      handler (val) {
      }
    }
  },
  data () {
    return {
      // datasss: [
      //   { value: 335,
      //     name: '直接访问',
      //     label: {
      //       show: true,
      //       position: 'center'
      //     },
      //     labelLine: {
      //       show: false,
      //       length: 50
      //     },
      //     itemStyle: {
      //       borderWidth: 20
      //     }
      //   },
      //   { value: 455, name: '邮件营销' },
      //   { value: 523, name: '联盟广告' },
      //   { value: 679, name: '视频广告' },
      //   { value: 48, name: '搜索引擎' }
      // ]
    }
  },
  created () {
    // console.log(this.styless)
  },
  mounted () {
    if (this.reff === 'first') {
      this.creatEchart(this.$refs[this.reff])
    }
    Bus.$on('openEcharst', (dom) => {
      // console.log('触发dom')
      if (this.reff === dom) {
        // console.log(this.$refs[dom])
        this.creatEchart(this.$refs[this.reff])
      }
    })
    // console.log('mounted')

    // console.log(this.datasss)
    // let aaa = this.datasss
  },
  updated () {
  },
  methods: {
    creatEchart (dom) {
      console.log(123)
      let echart = echarts.init(dom)
      // 配置项
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        // t图例组件
        legend: {
          orient: 'vertical', // 水平还是垂直
          x: 'left',
          top: '50%',
          // left: '10%',
          itemGap: 20,
          paddind: 20,
          // formatter: ['{a|{name}}', '{b|' + arrrr + '}', '{c|ddd}'].join(''),
          // formatter: '{a|{name}} | {b| b}',
          formatter: (name) => {
            var arr = []
            var index = 0
            var total = 0
            for (var i = 0; i < this.datasss.length; i++) {
              total += this.datasss[i].value
              if (this.datasss[i].name === name) {
                index = i
              }
            }

            arr.push(
              '{a|' + name + '}',
              '{b|' + ((this.datasss[index].value / total) * 100).toFixed(1) + '%}',
              '{x|' + this.datasss[index].value + '}'
            )
            //   console.log(arr)

            return arr.join('')
          },

          // tooltip: {
          //   show: true
          // },
          textStyle: {
            rich: {
              a: {
                color: 'red'
              },
              b: {
                color: '#ccc'
              },
              x: {
                fontSize: 18,
                fontFamily: 'Microsoft YaHei',
                borderColor: '#449933',
                borderRadius: 4
              }
            }
          },

          // formatter: '{a} <br/>{b}: {c} ({d}%)',
          // data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
          data: [{ name: '直接访问', icon: 'circle' }, { name: '邮件营销', icon: 'circle' }, { name: '联盟广告', icon: 'circle' }, { name: '视频广告', icon: 'circle' }, { name: '搜索引擎', icon: 'circle' }]
        },
        // 折线/面积图
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          //   roseType: true,
          // hoverOffset: 40,
          startAngle: 15,
          // minShowLabelAngle: 300,
          // roseType: 'area',
          itemStyle: {
            borderWidth: 10
          },
          label: {
            normal: {
              show: false,
              position: 'center'
            },

            emphasis: {
              show: true,
              textStyle: {
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            formatter: '{b}: {d}'
          },
          labelLine: {
            normal: {
              show: true
            }
          },
          data: this.datasss
        }]
      }
      echart.setOption(option)
    }
  },
  beforeDestroy () {
    console.log(5)

    Bus.$off('openEcharst')
  }
}
</script>

<style>
</style>
